import React from "react";
// class Hellow extends React.Component{
//     constructor(){
//         super()
//         this.state = {
//             count:1
//         }
//     }
//     render(){
//         return (
//             <div>
//             <div>六杰克逊{this.state.count}</div>
//             <button onClick={()=>{
//                 this.setState({
//                     count:this.state.count+1
//                 });
//             }}>点击</button>
//             </div>
//         )
//     }
// }

class Happy extends React.Component{
    state = {
        count:1,
        text:'',
        text2:"",
        content:"",
        isChecked:false
    }
    Incler(){
        this.setState({
            count:this.state.count+1
        })
    }
    handleAdd = ()=>{
        this.setState({
            count:this.state.count+2
        })
    }
    handleForm = (e)=>{
        const target = e.target;
        const value = target.type==='checkbox'?target.checked:target.value;
        const name = target.name;

        this.setState({
            [name]:value
        })
    }
    render(){
        return(
            <div>
                <h3>计算器{this.state.count}</h3>
                <h3>输入框{this.state.text}</h3>
            <input type="text"value={this.state.text} onChange={e=>{
                this.setState({
                    text:e.target.value
                })
            }} />
            <input type="text"  name="text2" value={this.state.text2} onChange={this.handleForm} />
            <textarea name="content" value={this.state.content} onChange={this.handleForm}></textarea>
            <input type="checkbox" name="isChecked" checked={this.state.isChecked} onChange={this.handleForm}></input>
            <div onClick={()=>{this.Incler()}}>加1</div>
            <div onClick={this.handleAdd}>加2</div>
            </div>
        )
    }
}


export default Happy